<template>
  <div id="settled">
    <!-- 头部 -->
    <settled-residential-area-header
      @headerSearchBtnClick="headerSearchBtnClick"
    />
    <!-- 表格 -->
    <settled-residential-area-table
      @auditDialogLinkClick="auditDialogLinkClick"
      @deleteDialogLinkClick="deleteDialogLinkClick"
      @firstPageClick="firstPageClick"
      @previousPageClick="previousPageClick"
      @nextPageClick="nextPageClick"
      @lastPageClick="lastPageClick"
      @junkToOtherPage="junkToOtherPage"
    />

    <!-- 审核信息 -->
    <el-dialog
      :visible.sync="isShowExamineDialog"
      width="808px"
      class="dialogTitle_G"
      @close="examineDialogClose"
    >
      <span slot="title" class="dialogTitle_blue_G">审核信息</span>
      <el-form label-width="80px" class="form_G">
        <el-form-item label="审核状态">
          <el-cascader
            size="small"
            clearable
            placeholder="请审核"
            class="formCascader_G"
            :props="{ expandTrigger: 'hover' }"
            :options="auditSelectOptions"
            v-model="dialogData.auditStatusOptions"
            @change="handleExamineDialogSelectChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="原 因">
          <el-input
            type="textarea"
            :rows="3"
            resize="none"
            placeholder="请填写原因"
            v-model="dialogData.reason"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer_G">
        <cs-btn
          type="primary"
          @click.native="confirmBtnClick"
          btnText="确定"
          :buttonStatus="buttonStatus"
          :largeBtnWidth="true"
          :largeMarginRight="true"
        />

        <cs-btn
          @click.native="isShowExamineDialog = false"
          btnText="取消"
          :largeBtnWidth="true"
        />
      </div>
    </el-dialog>

    <!-- 删除小区 -->
    <el-dialog
      title="删除小区"
      :visible.sync="isShowDeleteDialog"
      width="681px"
      class="dialogTitle_G"
      @close="deleteDialogClose"
    >
      <div class="deleteTip2_G">确定<b>删除</b>选中的小区？</div>
      <div class="dialog-footer_G">
        <cs-btn
          type="primary"
          @click.native="confirmBtnClick"
          btnText="确定"
          :buttonStatus="buttonStatus"
        />
        <cs-btn @click.native="isShowDeleteDialog = false" btnText="取消" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SettledResidentialAreaHeader from "./cpns/SettledResidentialAreaHeader.vue";
import SettledResidentialAreaTable from "./cpns/SettledResidentialAreaTable.vue";

import CsBtn from "@/components/CsBtn/CsBtn.vue";

export default {
  name: "settledResidentialArea",
  components: {
    SettledResidentialAreaHeader,
    SettledResidentialAreaTable,
    CsBtn,
  },
  data() {
    return {
      // 审核小区信息对话框 start
      isShowExamineDialog: false,
      buttonStatus: false,
      auditSelectOptions: [],
      dialogData: {
        auditStatusOptions: "",
        reason: "",
      },
      // 审核小区信息对话框 end
      // 删除小区信息对话框 start
      isShowDeleteDialog: false,
      currentSelect: 1,
      deleteId: [],
      buttonStatus: false,
      // 删除小区信息对话框 end
    };
  },
  methods: {
    // 头部搜索按钮点击事件
    headerSearchBtnClick(data) {
      console.log(data);
    },
    // 处理审核小区信息对话框选择事件
    handleExamineDialogSelectChange() {},
    // 审核小区信息对话框链接点击事件
    auditDialogLinkClick() {
      this.isShowExamineDialog = true;
    },
    // 审核小区信息对话框关闭事件
    examineDialogClose() {},
    // 删除小区信息对话框链接点击事件
    deleteDialogLinkClick() {
      this.isShowDeleteDialog = true;
    },
    // 删除小区信息对话框关闭事件
    deleteDialogClose() {},
    // 第一页按钮点击
    firstPageClick() {},
    // 上一页按钮点击
    previousPageClick() {},
    // 下一页按钮点击
    nextPageClick() {},
    // 最后一页按钮点击
    lastPageClick() {},
    // 手动输入跳转其他页
    junkToOtherPage(pageNum) {},
  },
};
</script>

<style lang="scss" scoped>
#settled {
  margin: 26px;
}
</style>
